<template>
    <div ref="myChart"/>
</template>

<script>

export default {
    name: "BarLineChart",
    data: function () {
        return {
            seriesArray: []
        }
    },
    methods: {
        initSeries(optionData) {
            let _this = this;
            optionData.legendData.forEach((item, index) => {
                _this.seriesArray.push({
                    name: item,
                    yAxisIndex: optionData.yAxisIndex[index],
                    type: optionData.seriesType[index],
                    data: optionData.seriesData[index],
                    itemStyle: optionData.itemStyle[index]
                })
            })

            let some = optionData.seriesData[optionData.seriesData.length - 1].some(item => item < 0);
            optionData.lineStyle = some ? {
                color: "rgba(255, 0, 0, 1)",
                width: 3
            } : {};

            let myChart = this.$root.$echarts.init(this.$refs.myChart);
            let option;

            option = {
                backgroundColor: 'rgba(11,32,53,0)',
                textStyle: {
                    color: '#FFFFFF',
                    opacity: 0.85
                },
                title: {
                    // text: '世界港口集装箱吞吐量排名',
                    text: optionData.titleText,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: '26px',
                        opacity: 1
                    },
                    subtext: optionData.subText,
                    subtextStyle: {
                        color: '#ff6666',
                        fontSize: '16px',
                        opacity: 1
                    }
                    // subtext: '数据来自网络'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    textStyle: {
                        fontSize: 16
                    }
                },
                legend: {
                    show: true,
                    data: optionData.legendData,
                    top: 'bottom',
                    itemWidth: 20,
                    textStyle: {
                        fontSize: 16,
                        color: '#FFFFFF',
                        opacity: 0.85
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '8%',
                    top: '100',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: optionData.xAxisData,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            interval: 0
                        }
                    },
                    {
                        type: 'category',
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLine: {
                            lineStyle: optionData.lineStyle,
                            z: 2
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: optionData.yAxisName[0],
                        axisLabel: {
                            formatter: '{value}'
                        },
                        nameTextStyle: {
                            align: "center",
                            fontSize: 16
                        }
                    },
                    {
                        type: 'value',
                        name: optionData.yAxisName[1],
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        axisPointer: {
                            type: "line"
                        },
                        nameTextStyle: {
                            fontSize: 16
                        }
                    }
                ],
                dataZoom: [{
                    type: "inside"
                }],
                series: this.seriesArray
            };

            option && myChart.setOption(option);
        }
    }
}
</script>

<style scoped>

</style>